<template>
	<div>


	<div class="login-content">

     <h3 style="font-weight: normal;">选择机构</h3>
   	<van-steps :active="active" style="margin-bottom: 12px;">
		  <van-step>选择地区</van-step>
		  <van-step>选择机构</van-step>
		  <van-step>选择名称</van-step>
		  <van-step>详细信息</van-step>
	</van-steps>
	<div class="btn_content" >
    <van-button type="default"
                v-for="(item,i) in items"
                :key="i"
                :class="{'active':isActive==i}"
                @click="dianji(i,item.value)">{{item.name}}</van-button>
	</div>
  </div>
  <div class="btn_submit" >
  	   <van-button type="primary" @click="goback()" size="large" style="background-color: #CCCCCC;color: #fff;border:none">上一步</van-button>
  	   <van-button type="primary" @click="next()" size="large" style="background-color: #4C9FFD;border:none">下一步</van-button>
  </div>
  </div>

</template>
<script>
	export default{
		data(){
			return{
			    cityId:"",
				  active:1,
          isActive:-1,
          items:[],
          enterpriseValue:""
			}
		},
      mounted:function(){
		    this.cityId = this.$route.query.cityId;
        console.log(this.cityId);
        this.get_choiceEnterprises();
      },
		methods:{
		    //上一步
		    goback(){
		        this.$router.push({
					    path:'/changeaddre'
				    })
			  },
        //下一步
        next(){
            var enterpriseValue = this.enterpriseValue;
            if(enterpriseValue == ''){
                this.$toast("请选择机构");
                return false;
            }
            this.$router.push({
                path:'/selectname',
                query:{cityId:this.cityId,enterpriseValue:this.enterpriseValue}
            })
        },
        get_choiceEnterprises(){
            const that = this;
            this.$sendRequest('/login/choiceEnterprise',"cityId="+this.cityId).then(function(res){
                console.log(res.data);

                that.items = res.data.result.dictionariesList;
                console.log(that.items);
            })
        },
        dianji(i,value){
            this.isActive = i;
            this.enterpriseValue = value;
        }

		}
	}
</script>

<style scoped="scoped">
	.login-content{
		padding: 12px;
	}

	.btn_content{
		text-align: left;


	}
	.btn_content button{
		width: 43%;
		margin-left: 15px;
		margin-bottom: 17px;
		border:1px solid #4C9FFD;
		color: #4C9FFD;
	}
	.btn_submit{
		position: absolute;
		display: flex;
		justify-content: space-around;
		bottom: 0;
		width: 100%;
	}
  .active{
    background: #4C9FFD;
    color: #ffffff !important;
  }
</style>
